<template>
  <div class="headerTemplate">
    <div class="theUserTop">
      <div class="headerTopMain">
        <div class="headerTheUserL">
          <p class="logo"><router-link :to="{name: 'index'}"><img :src="headerLogo" alt=""></router-link></p>
        </div>
        <div class="headerTheUserR">
          <p v-for="(login,ind) in loginAndRegister" :class="{on:$route.query.stateId==login.id}">
            <router-link :to="{name: login.url, query: {stateId: login.id}}">
              {{login.name}}
            </router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './header.scss';
	export default {
		name: "theUserHeader",
    data() {
		  return {
        headerLogo: require('../../../assets/images/header/logo_setting.png'),
        headerName: '',
        loginAndRegister: [
          {
            id: 1,
            name: '登录',
            url: 'login'
          },
          {
            id: 2,
            name: '注册',
            url: 'register'
          },
        ],
      }
    },
    activated() {
      this.initData();
    },
    methods: {
		  initData() {
		    let that = this;
		    let stateId = parseInt(that.$route.query.stateId);
		    switch (stateId) {
          case 1:
            that.headerName = '登录';
            break;
          case 2:
            that.headerName = '注册';
            break;
          case 3:
            that.headerName = '忘记密码';
            break;
          case 4:
            that.headerName = '绑定手机号';
            break;
        }
      }
    }
	}
</script>
